<template>
    <div>
      <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
        <template #toolbar>
          <a-button
            @click="handleExport"
            :loading="expLoading"
          > 
            导出
          </a-button>
          <a-button
            type="error"
            :disabled="getSelectRows().length === 0"
            @click="handleDelete"
            :loading="delLoading"
          > 
            批量删除
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '查看详情',
                onClick: handleDetail.bind(null, record, false),
              },
              {
                label: '回复',
                onClick: handleDetail.bind(null, record, true),
              },
              {
                color: 'error',
                label: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDeleteSingle.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </BasicTable>
      <EditModal @register="registerModal" @success="handleSuccess" />
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
  import { defHttp } from '@/utils/http/axios';
  export default defineComponent({
    name: 'FeedBackList',
  });
  </script>
  <script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { downloadBlob } from '@/utils/file/download';
  import EditModal from './EditModal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import dayjs from 'dayjs';
  const delLoading = ref(false);
  const expLoading = ref(false);
  const { createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();
  const [registerTable, { reload, getForm, getSelectRows, getSelectRowKeys }] =
    useTable({
      api: '/feedback/feedback/list',
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          width: 150,
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          width: 150,
        },
        {
          title: '反馈内容',
          dataIndex: 'content',
          width: 150,
        },
        {
          title: '提交方式',
          dataIndex: 'type',
          width: 150,
          customRender: ({record}) => {
            return `${record.submitMethod === 1 ?  '小程序' : 'APP'} `
          },
        },
        {
          title: '时间',
          dataIndex: 'createDate',
          width: 150,
          customRender: ({ record }) => {
            return `${dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss')}`
          }
        },
      ],
      useSearchForm: true,
      formConfig: {
        labelWidth: 100,
        baseColProps: {
            span: 8
        },
        schemas: [
          {
            field: 'keyword',
            label: '姓名或手机号',
            component: 'Input',
          },
          {
            field: 'submitMethod',
            label: '提交方式',
            component: 'Select',
            componentProps: {
              options: [
                { label: '小程序', value: 1 },
                { label: 'APP', value: 0 },
              ],
            },
          },
          {
            field: '[startTime, endTime]',
            label: '日期范围',
            component: 'RangePicker',
            componentProps: {
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD 00:00:00',
              style: { width: '100%' },
            }
          },
        ],
      },
      showIndexColumn: true,
      indexColumnProps: {
        fixed: 'left',
      },
      pagination: true,
      bordered: true,
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      rowKey: 'id',
      rowSelection: {
        type: 'checkbox',
      },
    });
  function handleCreate() {
    openModal(true, {
        isUpdate: false
    });
  }
  function handleDetail(record: Recordable, isReply: boolean) {
    debugger
    openModal(true, {
        id: record.id,
        isReply
    });
  }
  async function handleDelete() {
    delLoading.value = true;
    try {
        const res = await defHttp.post({ url: `/feedback/feedback/deletes`, data: getSelectRowKeys() });
        createMessage.success(res);
        reload();
    } finally {
        delLoading.value = false;
    }
  }
  async function handleDeleteSingle(record: Recordable) {
    const res = await defHttp.post({ url: `/feedback/feedback/deletes`, data: [record.id] });
    createMessage.success(res);
    reload();
  }
  async function handleExport() {
    try {
        expLoading.value = true;
        const res = await defHttp.get({ url: '/feedback/feedback/export', responseType: 'blob', params: { ...getForm().getFieldsValue() } }, { isReturnNativeResponse: true });
        downloadBlob(res);
    } finally {
        expLoading.value = false;
    }
}
  function handleSuccess() {
    reload();
  }
  </script>
  